<template>
	<view class="container">
		<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#FA2C1E"
		 @clickItem="onClickItem"  style="background-color: #fff;"/>
		<view class="orders">
			<view class="order" v-for="(item,index) in cooperationList" :key="index" >
				<image src="/static/apply_under_review.png" mode="widthFix" v-if="state[current] == 0"
				style="width: 116rpx;height: 48rpx;position: absolute;right: -6rpx;top: -16rpx;"></image>
				<view class="center">
					<view class="cell">
						<view class="label"> 申请身份 </view>
						<view class="value"> {{item.apply_type_name}} </view>
					</view>
					<view class="cell">
						<view class="label"> 申请门店 </view>
						<view class="value"> {{item.shopname}} </view>
					</view>
					<view class="cell">
						<view class="label"> 申请结果 </view>
						<view class="value"> {{stateMap[state[current]]}} </view>
					</view>
					<view class="cell" v-if="state[current] == 2">
						<view class="label"> 拒绝原因 </view>
						<view class="value"> {{item.refuse_reason}} </view>
					</view>
					<view class="cell">
						<view class="label"> 申请时间 </view>
						<view class="value"> {{item.createtime}} </view>
					</view>
					<view class="result" v-if="state[current] != 0">
						<image src="/static/apply_passed.png"  v-if="state[current] == 1" mode="widthFix" style="width: 112rpx;height: 112rpx;"></image>
						<!-- <image src="/static/apply_revoke.png"  v-if="state[current] == 2 && index %2 ==0" mode="widthFix" style="width: 112rpx;height: 112rpx;"></image> -->
						<image src="/static/apply_failed.png"  v-if="state[current] == 2" mode="widthFix" style="width: 112rpx;height: 112rpx;"></image>
					</view>
				</view>
				
				<view class="options" v-if="state[current] != 1">
					<button type="default" class="btn pay" v-if="state[current] == 2" @click.stop="cancelReApply(item.id,2)">重新申请</button>
					<button type="default" class="btn cancel" v-if="state[current] == 0 || state[current] == 2" @click.stop="cancelReApply(item.id,1)">撤销</button>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import {getCooperationListByStatus,cancelReApply} from '../../../api/api.js'
	export default {
		data() {
			return {
				shop_id:'',
				current: 0,
				items: ['审核中', '审核未通过', '审核通过'],
				// 0审核中 1已通过 2已驳回 【前面是Index后面是订单状态】
				state:{ 0:0, 1:2, 2:1 },
				stateMap:{0:'审核中',1:'审核通过',2:'审核未通过'},
				page:1,
				cooperationList:[],
				status:'more',
				statusTypes: [{
					value: 'more',
					text: '加载前',
					checked: true
				}, {
					value: 'loading',
					text: '加载中',
					checked: false
				}, {
					value: 'noMore',
					text: '没有更多',
					checked: false
				}],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad(options) {
			this.shop_id = uni.getStorageSync('shop_id')
			this.getCooperationListByStatus()
		},
		// onReachBottom(){  //上拉触底函数
		// 	if(this.status == 'more'){  //此处判断，上锁，防止重复请求
		// 		this.page+=1
		// 		this.getCooperationListByStatus()
		// 	}
		// },
		methods:{
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					// this.page = 1
					// this.cooperationList = []
					this.getCooperationListByStatus()
				}
			},
			getCooperationListByStatus(){
				this.status = 'loading'
				getCooperationListByStatus({status:this.state[this.current],shop_id:this.shop_id}).then(res=>{
					this.cooperationList = res.data.data
					this.status = 'noMore'
					// this.cooperationList.push(...res.data.data.data)
					// if(this.cooperationList.length >= res.data.data.total){
					// 	this.status = 'noMore'
					// }else {
					// 	this.status = 'more'
					// }
				})
			},
			// 撤销/重新申请
			cancelReApply(id,status){
				let that = this
				if(status == '1'){
					uni.showModal({
						title: '是否取消申请',
						confirmText:'确认撤销',
						success: function (res) {
							if (res.confirm) {
								that.cancelReApplyComfirm(id,status)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else {
					this.cancelReApplyComfirm(id,status)
				}
			},
			cancelReApplyComfirm(id,status){
				cancelReApply({apply_id:id,status}).then(res=>{
					console.log(res)
					// this.page = 1
					// this.cooperationList = []
					this.getCooperationListByStatus()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: calc(100vh - 88rpx);
		background: #F8F8F8;
		/deep/.segmented-control {
			background-color: #fff;
		}
	}
	.orders {
		padding: 0 24rpx;
		.order {
			position: relative;
			width: 100%;
			// height: 392rpx;
			background-color: #fff;
			padding: 24rpx 30rpx;
			box-shadow: 0px 2rpx 20rpx 0px rgba(0,0,0,0.05);
			border-radius: 16rpx;
			margin-top: 22rpx;
			.center {
				position: relative;
				.cell {
					display: flex;
					padding: 10rpx 0;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					.label{
						margin-right: 48rpx;
						color: #333333;
					}
					.value {
						color: #666666;
					}
				}
				.result {
					position: absolute;
					top:50%;
					right: 10rpx;
					transform: translateY(-50%);
					width: 112rpx;
					height: 112rpx;
				}
			}
			.options {
				margin-top: 12rpx;
				padding-top: 20rpx;
				border-top: 2rpx solid #E7E7E7;
				.btn {
					width: 170rpx;
					height: 60rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height:60rpx;
					float: right;
					margin-left: 20rpx;
				}
				.btn::after{
					content:none;
					border:none
				}
				.cancel {
					border: 1px solid #D1D2D5;
					color: #666666;
				}
				.pay {
					background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
					color: #FFFFFF;
				}
			}
			.options::after{clear:both;content:'';display:block;}
		}
	}
</style>
